<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
        <el-amap-text v-for="text in texts" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
      </el-amap>
     

      <a-modal
        title="分屏"
        :width="modalWidth"
        :visible="visible"
        :bodyStyle="bodyStyle"
        style="top: 0px;"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭">

        <h1>helloworld</h1>

      </a-modal>

       <station-modal ref="modalForm" @ok="modalFormOk"></station-modal>
    </div>

    
  </template>
<script>
   import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import StationModal from './modules/StationModal'


import VueAMap from 'vue-amap'
const amapManager = new VueAMap.AMapManager();
let Geocoder;
export default {
   mixins:[JeecgListMixin, mixinDevice],
    components: {
        StationModal
      },
      name: 'amap-page',
      data() {
        return {
          visible: false,
          bodyStyle:{
            padding: "0",
            height:(window.innerHeight-150)+"px"
          },
         modalWidth:800,
          count: 1,
          slotStyle: {
            padding: '2px 8px',
            background: '#eee',
            color: '#333',
            border: '1px solid #aaa'
          },
          zoom: 9,
          center: [114.188285,32.143965],
          markers: [
            
          ],texts: [
          ],
          renderMarker: {
            position: [114.088285,32.143965],
            contentRender: (h, instance) => {
              // if use jsx you can write in this
              // return <div style=\{\{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'\}\} onClick={() => ...}>marker inner text</div>
              return h(
                'div',
                {
                  style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
                  on: {
                    click: () => {
                      const position = this.renderMarker.position;
                      this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002];
                    }
                  }
                },
                ['marker inner text']
              )
            }
          },
          componentMarker: {
            position: [121.5273285, 31.21315058],
            contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
          },
          slotMarker: {
            position: [121.5073285, 31.21715058]
          }
        };
      },created() {
        this.loaddata();
      },
      methods: {
        onClick() {
          this.count += 1;
        },
        changePosition() {
          let position = this.markers[0].position;
          this.markers[0].position = [position[0] + 0.002, position[1] - 0.002];
        },
        chnageDraggle() {
          let draggable = this.markers[0].draggable;
          this.markers[0].draggable = !draggable;
        },
        toggleVisible() {
          let visableVar = this.markers[0].visible;
          this.markers[0].visible = !visableVar;
        },
        addMarker() {
          let marker = {
            position: [121.5273285 + (Math.random() - 0.5) * 0.02, 31.21515044 + (Math.random() - 0.5) * 0.02]
          };
          this.markers.push(marker);
        },
        removeMarker() {
          if (!this.markers.length) return;
          this.markers.splice(this.markers.length - 1, 1);
        },
        loaddata(){
          this.$http.get('/welcome/getstation')
          .then(res => {

            for(let i=0;i<res.result.length;i++){
                  window.console.log("****"+JSON.stringify(res.result[i]));
                 
                  
                  if(res.result[i].longitude==null||res.result[i].longitude==""){
                    res.result[i].longitude=114.088285;
                    res.result[i].latitude=32.143965;                   
                  }
                  if(res.result[i].latitude==null||res.result[i].latitude==""){
                    res.result[i].longitude=114.088285;
                    res.result[i].latitude=32.143965;                   
                  }
                  
                 let marker= {
                    position:[Number(res.result[i].longitude),Number(res.result[i].latitude)],
                    events: {
                      click: () => {

                        this.handleDetail(res.result[i]);

                        //alert('to do some thing!');  
                      }
                    },
                    visible: true,
                    draggable: false,
                    template: '<span>1</span>',
                  };
                  this.markers.push(marker);

                  let textd={
                    position: [Number(res.result[i].longitude),Number(res.result[i].latitude)],
                        text: res.result[i].stationName,
                        offset: [0, -50],
                        events: {
                          click: () => {
                            this.handleDetail(res.result[i]);
                            //this.visible=true;
                           // alert('click text');
                          }
                        }
                  }
                  this.texts.push(textd);
                   window.console.log(marker.position);

            }
            
              
          })
        }, handleOk(){
          this.visible = false;

      },
          handleCancel () {
            this.visible = false;
          },
          handleDetail(record){
            
            
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title="详情";
            this.$refs.modalForm.disableSubmit = true;

          }
      }
}
</script>
<style>
.search-box{
    border: 1px solid #ccc;
    width: 100%;
}
.search-box-wrapper{
    width: 100%;
}
.amap-page-container{
    width: 100%;
    height: 800px;
    z-index: 999;
}
    .amap-demo {
      height: 300px;
      height: 300px;
    }
  </style>
